import { PureComponent } from "react"
import { isNull, calcField } from "../../utils/helper"
import F2 from "@antv/f2/lib/index-all"
import MAction from '../MAction/MAction';
interface Props {
  list: any[],
  title?: any,
  total?: any,
  desc?: any,
  height?: any,
  event_key?: any,
  componentStyle?: object
}
interface State {

}

export default class MiMiniRing extends PureComponent<Props, State> {
  private chart: any;
  private canvasId = Math.random() + new Date().getTime() + "";
  private wrapper: any;
  public state: State = {

  }
  renderText = (item, obj = {}) => {
    if (isNull(item)) {
      return null;
    }
    else {
      let { text, style } = item;
      text = calcField(text, obj);
      return text;
    }
  }
  componentWillReceiveProps(nextProps: Props) {
    let { list: oldList } = this.props;
    let { list: newList } = nextProps;
    if (!_.isEqual(oldList, newList)) {
      setTimeout(() => {
        this.renderChart(nextProps)
      })
    }
  }
  renderChart(nextProps) {
    this.chart.clear();
    let props = nextProps || this.props;
    let { dataset_key, list = [] } = props;
    if (!isNull(dataset_key) && isNull(list)) {
      return;
    }
    let obj = {}, _total = 0;
    list.map(item => {
      _total += item.y
    })
    obj._total = _total;
    let { title, total, desc } = this.props;

    this.chart.source(list, {

    });

    this.chart.tooltip(false);

    this.chart.legend({
      position: 'left',
      itemFormatter: function itemFormatter(val) {
        // console.log("val", val, list.filter(i => i.x == val)[0].y);
        // let y = list.filter(i => i.x == val)[0].y
        return val;
      }
    });

    this.chart.coord('polar', {
      transposed: true,
      radius: 1,
      innerRadius: 0.85
    });

    this.chart.axis(false);

    //z为分组字段 如果数据中没有z字段 说明就一个分组
    this.chart.interval().position('z*y').color("x").adjust("stack");
    let titleHtml = this.renderText(title, obj);
    if (!isNull(titleHtml)) {
      titleHtml = '<p style="font-size: 16px;color:#666;margin:0;">' + titleHtml + '</p>'
    }
    else {
      titleHtml = ""
    }

    let totalHtml = this.renderText(total, obj);
    if (!isNull(totalHtml)) {
      totalHtml = '<p style="font-size: 32px;margin:0;margin:10px 0;">' + totalHtml + '</p>'
    }
    else {
      totalHtml = ""
    }

    let descHtml = this.renderText(desc, obj);
    if (!isNull(descHtml)) {
      descHtml = '<p style="color:#999;font-size:16px;">' + descHtml + '</p>'
    }
    else {
      descHtml = ""
    }
    if (!(isNull(titleHtml) && isNull(totalHtml))) {
      this.chart.guide().html({
        position: ['50%', '50%'],
        html: '<div id="a" style="color: #000;white-space: nowrap;text-align:center;">' + titleHtml + totalHtml + descHtml + '</div>'
      });
    }
    this.chart.render();
  }
  componentDidMount() {
    let { width } = this.wrapper.getBoundingClientRect();
    let { list, height } = this.props;
    if (isNull(height)) {
      height = window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618;
    }
    this.chart = new F2.Chart({
      id: this.canvasId,
      // width: window.innerWidth,
      width: width,
      height: height,
      pixelRatio: window.devicePixelRatio
    });
    this.renderChart(list);
  }
  render() {
    let { componentStyle } = this.props;
    return (
      <div ref={e => this.wrapper = e} style={{ ...componentStyle }} onClick={(e) => {
        e.preventDefault()
        e.stopPropagation()
        MAction({ ...this.props }, this.props.event_key);
      }}>
        <div className="chart-wrapper">
          <canvas id={this.canvasId} />
        </div>
      </div>
    )
  }
}

/*
饼图 中间可以有说明文字
数据源为[{"x":"办公室","y":10},{"x":"楼道","y":101}]格式 {{_total}}会被替换为数据源汇总所有y值的和
var config ={
  "component_type":"mi-miniarea",
  "height":100,//图标的高度
  "dataset_key":"",//数据源
  "title":{//第一行文字
    "text":"本月用电量",
    "style":{

    }
  },
  "total":{//第二行文字
    "text":"{{_total}}",
    "style":{

    }
  },
  "desc":{//第三行文字
    "text":"{{desc}}",
    "style":{

    }
  },
  "componentStyle":{},
  "event_key":""
}
*/